<template>
    <div class="container">
        <p>商品分类</p>
       <div class="categorys">
        <div class="left">
            <div @click="changeActive(index)" :class="{ leftItem: true, active: index == active }"
                v-for="item, index in categorys_level1" :key="item.id">
                {{ item.name }}
            </div>
        </div>
        <div class="right">
            <div v-for="item in categorys_level1[active].children" :key="item.id" @click="goProductList(item)">
                <img :src="item.img">
                <div class="categotyName2">{{ item.name }}</div>
            </div>
        </div>
        
    
    </div>
     <banner></banner>
    </div>
    
</template>
<script>
import api from '../api/index'
import banner from '../components/banner.vue'
export default {
    name: "",
    components: {
        banner
    },
    data() {
        return {
            active: 0,
            categorys_level1: [],
            baseURL: api.baseURL
        }
    },
    methods: {
        changeActive(index) {
            this.active = index
        },
        getCategorys() {
            this.$http({
                url: "/categorys",
            }).then(res => {
                console.log(res)
                let categorys_level1 = [], levelObj = {}
                for (let i = 0; i < res.length; i++) {
                    let category = res[i]
                    category.img = api.baseURL + category.img
                    if (category.level == 1) {
                        categorys_level1.push(category)
                        levelObj[category.id] = category
                        levelObj[category.id].children = []
                    } else if (category.level == 2) {
                        if (levelObj[category.parentId]) levelObj[category.parentId].children.push(category)
                    }
                    this.categorys_level1 = categorys_level1;
                }
            })
        },
        goProductList(item)  {
            console.log(item)
            this.$router.push({
                path:'/productList',
                query:{key:item.name}
            })
        }
    },
    created() {

    },
    mounted() {
        this.getCategorys(0)
    },
}
</script>
<style scoped>
.container {
    height: 666px;
}
.container p {
  
    font-size: 18px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #000000;
text-align: center;
}
.categorys {
    height: 500px;
}
.left {
    position: fixed;
    margin-top: 100px;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100px;
    background-color: #EAEDEF;
    font-size: 14px;
    font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
    font-weight: 400;
    line-height: 80px;
    text-align: center;
    height: 500px;
}

.leftItem.active {
    background: #fff;
    color: #000;
    font-weight: bold;
}

.right {
    margin-top: 60px;
    margin-left: 190px;
    color: #000;
}
.right img {
    width: 100px;
    height: 96px;
}

.categotyName2 {
    padding: 15px;
    font-size: 12px;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-weight: 400;
color: #505050;
    
}
/* .bottem {
    margin-top: ;
} */
</style>